<template>
  <view class="commission-details" ref="container">
    <view class="promoterHeader bg-color-red">
      <view class="headerCon acea-row row-between-wrapper">
        <view>
          <view class="name">下级代理总数</view>
          <view class="money">
            <text class="num">{{ count }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="sign-record" ref="content">
    <!--  <view class="list">
		 <view class="listn" v-for="(item, indexn) in info" :key="indexn" style="padding: 10rpx;">
		  	<view class="itemn acea-row row-between-wrapper " >
		  		<view>
		  			<image style="width: 60rpx;height: 60rpx; vertical-align: bottom;" :src="item.avatar" mode=""></image>
		  		</view>
		  		<view>{{item.nickname}}</view>
		  		<view>月销售额{{item.salesVolume}}元</view>
		  	</view>
		  </view>
		  -->

		<u-list @scrolltolower="loadData()" height="calc( 100vh - 220rpx ) ">
			<u-list-item v-for="(item, index) in info" :key="index">
				<view class="product-box">
					<view class="flex">
						<view class="product-img">
							<image :src="item.avatar" mode=""></image>
						</view>
						<view class="product-details">
							<view class="name" style="display: flex;    align-items: center;">
								
									{{item.name || item.nickname || "暂无"}}  
								
								
								<text style="font-weight: 500;font-size: 20rpx;color: #FFFFFF;padding:3rpx 10rpx;border-radius: 9rpx;display: inline;height: 28rpx;margin-left: 15rpx;"
								 :style='stateStroe(item.roleName).color' >
									<image src="https://qny.yijiumy.com/1855/figure.png" style="width: 19rpx;height: 17rpx;margin-right: 6rpx;"></image> 
									{{stateStroe(item.roleName).name}}
								</text>
								
								
							</view>
							<view class="details-font">
								<text>注册日期:</text>{{$u.timeFormat(item.createTime, 'yyyy-mm-dd')}}
							</view>
							<view class="details-font">
								<text>联系电话:</text>{{item.shopPhone || item.phone || "暂无"}}
							</view>
							<view class="details-font">
								<text>最后购买日期:</text>{{ item.lastConsumptionDate? $u.timeFormat(item.lastConsumptionDate, 'yyyy-mm-dd'):'暂无'}}
							</view>
						</view>
					</view>
					<view class="flex all">
						<view class="">
							<view class="Panels-font">
								月销售总额 (元)
							</view>
							<view class="amount">
								{{item.salesVolume}}
							</view>
						</view>
						<u-line direction="col" length="60rpx"></u-line>
						<view class="">
							<view class="Panels-font">
								订单总数
							</view>
							<view class="amount">
								{{item.orderCon}}
							</view>
						</view>
					<!-- 	<u-line direction="col" length="60rpx"></u-line>
						<view class="">
							<view class="Panels-font">
								会员
							</view>
							<view class="amount">
								{{item.members}}
							</view>
						</view> -->
					</view>
				</view>
		
			</u-list-item>
		</u-list>
		
      </view>
    </view>
    <!-- <Loading :loaded="loaded" :loading="loading"></Loading> -->
  </view>
</template>
<script>
// import { getCommissionInfo, getSpreadInfo } from "@/api/user";
import {
		getMyAgent
	} from "@/api/admin";
import Loading from "@/components/Loading";

export default {
  name: "CashRecord",
  components: {
    Loading
  },
  props: {},
  data: function() {
    return {
      info: [],
      commission: 0,
      where: {
        page: 0,
        size: 10,
      },
	  roleLevelList:[
	  	{
	  		color:'background: linear-gradient(79deg, #8FCCFF ,#317FFF);',
	  		name:'市场人员',
	  		remark:'marketing_personnel',
	  	},
	  	{
	  		color:'background: linear-gradient(79deg, #FF8FE3,#EB3EFB );',
	  		name:'招商',
	  		remark:'investment'
	  	},
	  	{
	  		color:'background: linear-gradient(79deg, #FF8FA8 , #9F2B45);',
	  		name:'经销商',
	  		remark:'dealer'
	  	},
	  	{
	  		color:'background: linear-gradient(79deg,#8FFFB4 ,#2EDA5B  );',
	  		name:'批发商',
	  		remark:'wholesaler'
	  	},
	  	
	  	{
	  		color:'background: linear-gradient(79deg,#FFE98F ,#FBA43E );',
	  		name:'团购',
	  		remark:'group',
	  	},
	  	{
	  		color:'background: linear-gradient(79deg,#FFB18F ,#FB6A3E );',
	  		name:'会员',
	  		remark:'member',
	  	},
	  	{
	  		color:'background: linear-gradient(79deg,#8FFFB4 ,#2EDA5B  );',
	  		name:'门店管理员',
	  		remark:'store_administrator',
	  	}
	  ],
	  
      types: 1,
      loaded: false,
      loading: false,
	  count:0,
	  typeMap: {
	  	'pay_product': '消费',
	  	'recharge': '充值',
	  	'brokerage': '返佣',
	  	'extract': '提现',
	  	'sign': '签到积分',
	  	'pay_product_refund': '退款',
	  	'system_add': '系统增加',
	  	'system_sub': '系统减少',
	  	'deduction': '减去',
	  	'gain': '奖励',
	  	'price_difference': '差价'
	  },
	  nowMoney: 0
    };
  },
  mounted: function() {
    // this.getCommission();
    // this.getIndex();
	this.nowMoney = this.$yroute.query.nowMoney
	this.loadData()
  },
  onReachBottom() {
    this.loading === false && this.getIndex();
  },
  methods: {
	  stateStroe(name){
	   return	this.roleLevelList.find(item=>item.name==name)
	  },
	  loadData() {
	  	let that = this;
	  	getMyAgent(that.where).then(
	  		res => {
	  			that.loading = false;
	  			that.loaded = res.data.totalElements < that.where.limit;
	  			that.where.page = that.where.page + 1;
				that.count=res.data.totalElements
	  			that.info.push.apply(that.info, res.data.content);
	  		},
	  		err => {
	  			uni.showToast({
	  				title: err.msg || err.response.data.msg || err.response.data.message,
	  				icon: 'none',
	  				duration: 2000
	  			});
	  		}
	  	);
	  },
    getIndex: function() {
      let that = this;
      if (that.loading == true || that.loaded == true) return;
      that.loading = true;
      getCommissionInfo(that.types).then(
        res => {
          that.loading = false;
          that.loaded = res.data.length < that.where.limit;
          that.where.page = that.where.page + 1;
          that.info.push.apply(that.info, res.data);
        },
        err => {
          uni.showToast({
				title: err.msg || err.response.data.msg|| err.response.data.message,
				icon: 'none',
				duration: 2000
			});
        }
      );
    },
	goRouter(url) {
		this.$yrouter.push({path: url});
	}
  }
};
</script>
<style scoped lang="less">
	.list-item{
		display: flex;
		    align-items: center;
		    justify-content: space-around;
			margin: 30rpx 0;
			    height: 60rpx;
			    line-height: 60rpx;
	}
	.flex {
			display: flex;
			align-items: center;
		}
		/deep/.u-icon__icon{
			margin: auto;
		}
	
			.all {
				justify-content: space-around;
				margin-top: 20rpx;
				height: 100rpx;
				text-align: center;
	
				.Panels-font {
					font-size: 27rpx;
					line-height: 40rpx;
					height: 40rpx;
					margin: 10rpx 0;
					width: 100%;
					position: relative;
				}
	
				.amount {
					height: 60rpx;
					font-size: 35rpx;
					font-weight: 500;
					color: #000;
	
				}
			}
	
			.product-box {
				width: 90%;
				padding: 15rpx;
				border-radius: 20rpx;
				height: 320rpx;
				margin: 15rpx auto;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
	
				.product-details {
					height: 166rpx;
	
					.name {
						// height: 29rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #333333;
						margin-bottom: 10rpx;
						
					}
	
					.details-font {
						font-size: 25rpx;
						line-height: 40rpx;
						color: rgb(162, 162, 162);
	
						text {
	
							margin-right: 15rpx;
						}
					}
				}
	
				.product-img {
					width: 166rpx;
					height: 166rpx;
					background: #FFFFFF;
					margin-right: 20rpx;
	
					image {
						width: 166rpx;
						height: 166rpx;
						border-radius: 20rpx;
					}
				}
			}
	
			.box {
				width: 90%;
				justify-content: space-between;
				margin: 0 auto 30rpx;
	
				.Dark {
					color: rgb(102, 102, 102);
					background-color: rgb(229, 229, 229);
				}
	
				.Highlights {
					color: #fff;
					background-color: rgb(77, 191, 249);
				}
	
				>view {
					width: 45%;
					height: 80rpx;
					padding: 20rpx 0;
					text-align: center;
					line-height: 40rpx;
					border-radius: 20rpx;
				}
			}
	
			.earnings-Panels {
				position: relative;
				z-index: 2;
				width: 90%;
				margin: auto;
				height: 180rpx;
				border-radius: 20rpx;
				background-color: #fff;
				justify-content: space-around;
				text-align: center;
				padding: 15rpx 30rpx 35rpx;
				margin-bottom: 40rpx;
	
				.Panels-font {
					font-size: 27rpx;
					line-height: 40rpx;
					height: 40rpx;
					margin: 40rpx 0 20rpx;
					width: 100%;
					position: relative;
				}
	
				.amount {
					height: 60rpx;
					font-size: 23rpx;
					color: #ccc;
	
					text {
						font-size: 35rpx;
						font-weight: 500;
						color: #000;
					}
	
				}
	
				.all-earnings {
					height: 180rpx;
				}
	
				.balance {
					height: 180rpx;
	
					.buttom {
						position: absolute;
						right: -50rpx;
						bottom: 0;
						font-size: 12px;
						background-color: rgb(0, 183, 238);
						color: #fff;
						padding: 2rpx 15rpx;
						border-radius: 20rpx;
	
					}
				}
	
				.proceeds {
					height: 180rpx;
				}
			}
	
			.header {
				width: 90%;
				margin: auto;
				position: relative;
				margin-bottom: 30rpx;
				z-index: 2;
	
				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;
					image {
						width: 120rpx;
						height: 120rpx;
					}
				}
	
				.name {
					color: #fff;
					font-size: 20px;
					margin: 0 20rpx;
					width: calc( 90% - 106rpx );
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
	
				.icon_fuwushang {
					width: 120rpx;
					height: 30rpx;
					position: absolute;
					top: 0;
					left: 50rpx;
					transform: scale(0.8);
					.service-roleLevel {
						position: absolute;
						top: 0px;
						left: 0px;
						line-height: 40rpx;
						text-align: center;
						z-index: 2;
						font-size: 20rpx;
						width: 120rpx;
						color: rgb(234, 92, 32);
					}
	
					image {
						width: 150rpx;
						height: 50rpx;
						position: absolute;
						top: 0px;
						left: 0px;
					}
				}
	
				// height: ;
			}
	
			.back {
				width: 100%;
				height: 496rpx;
				position: absolute;
				top: 0px;
				z-index: 0;
	
				image {
					width: 100%;
					height: 496rpx;
					margin: auto;
				}
	
				// background: url('https://qny.yijiumy.com/back.png') no-repeat #F7F9FB ;
	
			}
		
	
</style>

